<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吴岱宬的个人博客-首页</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }
        .header{
            display: flex;
            align-items: center;
            width: 960px;
            margin: 50px auto 30px auto;
        }
        .header img{
            width: 80px;
            height: 80px;
            border-radius: 35%;
        }
        .header .text h3{
            margin-bottom: 5px;
        }
        .header .text p{
            font-family: 楷体;
        }
        body{
            background-image:url(./20191010190410_inzoa.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .nav{
            display: flex;
            justify-content: center;
            width: 1000px;
            margin: auto;
            background-color: aliceblue;
            text-align: center;
            padding: 10px 0;
        }
        .nav a{
            display: inline-block;
            text-decoration: none;
            color: black;
            background-color: aliceblue;
            padding: 25px 75px;
        }  
        .nav a:hover{
            color: aliceblue;
            background-color: sienna;
        }
        .bigbig{
            background-color: aliceblue;
            align-items: center;
            width: 960px;
            margin: 30px auto 30px auto;
            padding: 20px;
        }
        #banner{
            width: 950px;
            height: 400px;
            border: 2px solid #000;
            overflow: hidden;
            position: relative;
        }
        #imglist{
            width: 4750px;
            height: 400px;
        }
        #imglist img{
            width: 950px;
            height: 400px;
        }
        #imglist li{
            float: left;
        }
        .prev{
            background: #666;
            width: 30px;
            height: 40px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            position: absolute;
            left: 5px;
            top: 45%;
            cursor: pointer;
        }
        .next{
            background: #666;
            width: 30px;
            height: 40px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            position: absolute;
            right: 5px;
            top: 45%;
            cursor: pointer;
        }
        #icolist{
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        #icolist li{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #666;
            text-align: center;
            line-height: 30px;
            color: #fff;
            float:left;
            margin-left: 5px;
            cursor:pointer;
        }
        .jump a{
            font-size: 23px;
            color: black ;
            line-height: 65px;
        }
        a:hover{
            color: blue;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="header">
     <img src="./00我的头像.jpg" width="70px">
        <div class="text">
         <h3>吴岱宬的个人博客</h3>
         <p>投身天地这熔炉，总有些梦想和意志会因此薪火相传</p>
        </div>
    </div>
    <div class="nav">
        <a href="file:///C:/Users/21299/Desktop/HTML+css/%E4%BB%BB%E5%8A%A1%E4%B8%806.30/%E9%A6%96%E9%A1%B5.html">首页</a>
        <a href="file:///C:/Users/21299/Desktop/HTML+css/%E4%BB%BB%E5%8A%A1%E4%B8%806.30/%E4%B8%AA%E4%BA%BA%E4%BB%8B%E7%BB%8D.html">个人介绍</a>
        <a href="file:///C:/Users/21299/Desktop/HTML+css/%E4%BB%BB%E5%8A%A1%E4%B8%806.30/%E4%BD%9C%E5%93%81.html">作品</a>
        <a href="file:///C:/Users/21299/Desktop/HTML+css/%E4%BB%BB%E5%8A%A1%E4%B8%806.30/%E7%88%B1%E5%A5%BD.html">爱好</a>
        <a href="file:///C:/Users/21299/Desktop/HTML+css/%E4%BB%BB%E5%8A%A1%E4%B8%806.30/%E7%95%99%E8%A8%80%E6%9D%BF.html">留言板</a>
    </div>
    <div class="bigbig">
     <div id="banner">
        <ul id="imglist">
            <li><img src="./赛博朋克风.jpg" alt=""></li>
            <li><img src="./2.jpg" alt=""></li>
            <li><img src="./3.jpg" alt=""></li>
            <li><img src="./R-C.jpg" alt=""></li>
            <li><img src="./赛博朋克风.jpg" alt=""></li>
        </ul>
        <ul id="icolist">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div class="prev">《</div>
        <div class="next">》</div>
    </div>
    <script>
        var eprev=document.querySelector('.prev');
        var enext=document.querySelector('.next');
        var esico=document.getElementById('icolist').getElementsByTagName('li');
        var eicolist=document.querySelector('#icolist');
        var eimglist=document.querySelector('#imglist');
        var left =0;
        var timer;
        run();
        function run(){
            if(left <= -3600){
                left =0;
            }
            var m = Math.floor(-left/950);
            imglist.style.marginLeft = left +'px';
            var n = (left % 950 == 0) ? n= 1200 : n = 10;
            left -= 10;
            timer = setTimeout(run,n);
            icochange(m);
        }
        function imgchange(n){
            let lt = -(n*950);
            imglist.style.marginLeft = lt + 'px';
            left = lt;
        }
        eprev.onclick = function(){
            let prevgo = Math.floor(-left/950)-1;
            if(prevgo ==-1){
                prevgo =3;
            }
            imgchange(prevgo);
        }
        enext.onclick = function(){
           let nextgo = Math.floor(-left/950)+1;
            if(nextgo ==4){
                nextgo =0;
            }
            imgchange(nextgo);
        }
        function icochange(m){
            for (let index = 0; index < esico.length; index++) {
                esico[index].style.backgroundColor='';  
            }
            if(m<esico.length){
                esico[m].style.backgroundColor='green';
            }
        }
        eicolist.onclick=function(params){
            var tg=event.target;
            let ico=tg.innerHTML-1;
            imgchange(ico);
            icochange(ico);
        }
        eimglist.onmouseover=function(params){
            clearTimeout(timer)
        }
        eimglist.onmouseout=function(){
            run();
        }</script>
        <hr><br><hr>
        <h1>快捷链接：</h1>
        <ul class="jump">
            <li><a href="https://www.bilibili.com/video/BV1kM4y127Li/?spm_id_from=333.1387.favlist.content.click&vd_source=78ab8b1bb2a08198963d505b330856b2" target="_blank">1. 前端web开发HTML 5+CSS3加移动web视频教程，前端web入门首选黑马程序员</a></li>
            <li><a href="https://www.bilibili.com/video/BV16dKHeiE92/?spm_id_from=333.1387.favlist.content.click&vd_source=78ab8b1bb2a08198963d505b330856b2" target="_blank">2.【带小白做毕设】从0开始带小白做SpringBoot3+Vue3的完整实战项目</a></li>
            <li><a href="https://www.bilibili.com/video/BV1rpWjevEip/?spm_id_from=333.1387.favlist.content.click&vd_source=78ab8b1bb2a08198963d505b330856b2" target="_blank">3.【全748集】目前B站最全最细的Python零基础全套教程，2024最新版，包含所有干货！</a></li>
            <li><a href="https://www.bilibili.com/video/BV1Gt411b7Zq/?spm_id_from=333.1387.favlist.content.click&vd_source=78ab8b1bb2a08198963d505b330856b2" target="_blank">4.【4K精品】模拟电子技术基础 上交大 郑益慧主讲（模拟电路/模电 4K超清重制版）</a></li>
            <li><a href="https://www.bilibili.com/video/BV1vvExzFEEK/?spm_id_from=333.1387.favlist.content.click&vd_source=78ab8b1bb2a08198963d505b330856b2" target="_blank">5.【英语六级听力真题】历年最全六级听力原文听完必过！！英语六级听力技巧和方法</a></li>
            <li><a href="https://www.bilibili.com/video/BV1g34y1G72j/?spm_id_from=333.337.search-card.all.click&vd_source=78ab8b1bb2a08198963d505b330856b2" target="_blank">6. vue2最新教程</a></li>        
        </ul>
        </div>
</body>
</html>